<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 : </span>
        </el-col>
        <el-col :span="20">
          <span class="hand" @click="tableshow" :class="{'textactive' : !secondshow}">简历上传</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}"> > {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center" style="height: 50px;
    line-height: 50px;">
        <el-col :span="23">
          <div style="float: right">
            <el-button class="add" :class="{'active' : newcolor}" size="small" @mousedown.native="adddown"
                       @mouseup.native="addup" @click="addshow" round>新增
            </el-button>
            <el-button class="upload" :class="{'active3' : newcolor3}" size="small" @mousedown.native="uploaddown"
                       @mouseup.native="uploadup" @click="uploadshow" round>上传
            </el-button>
            <el-button class="edit" @mousedown.native="editdown" @mouseup.native="editup"
                       @click="edit()"
                       :class="{'active1' : newcolor1}" size="small" round>修改
            </el-button>
            <el-button class="delete" @mousedown.native="deletedown" @mouseup.native="deleteup"
                       @click="deletedata"
                       :class="{'active2' : newcolor2}" size="small" round>入库
            </el-button>
          </div>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            ref="singleTable"
            highlight-current-row
            :data="tableData"
            @current-change="handleCurrentChange"
          >
            <el-table-column
              label="推送客户"
            >
              <template slot-scope="scope">
                <span style="cursor: pointer" @click="viewdetail(scope.row)">{{scope.row.customerName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="需求编号"
            >
              <template slot-scope="scope">
                <span class="other" @click="getrequire(scope.row)">{{scope.row.requireNum}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="postName"
              label="推送职位">
            </el-table-column>
            <el-table-column
              prop="postLevel"
              label="职位级别">
            </el-table-column>
            <el-table-column
              prop="area"
              label="所属区域"
            >
            </el-table-column>
            <el-table-column
              label="姓名">
              <template slot-scope="scope">
                <span v-if="scope.row.fileAddress !== ''"><a class="other" :href="scope.row.group+'/'+scope.row.fileAddress" target="_blank">{{scope.row.name}}</a></span>
                <span v-if="scope.row.fileAddress == ''">{{scope.row.name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop=""
              label="毕业时间"
            >
              <template slot-scope="scope">
                <span>{{scope.row.graduationTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="出生年月"
            >
              <template slot-scope="scope">
                <span>{{scope.row.birthday}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="联系方式"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.phone">
                  <span v-if="scope.row.phone.indexOf('http') == -1">{{scope.row.phone}}</span>
                  <a  class="other" v-else :href="scope.row.phone" target="_Blank">电话链接</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="离职状态"
            >
            </el-table-column>
            <el-table-column
              prop="expectSalary"
              label="期望薪资"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.customerName !== '港交所'">{{scope.row.expectSalary}}k*{{scope.row.expectSalaryNum}}</span>
                <span v-if="scope.row.customerName == '港交所'">无</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="entryTime"
              label="到岗时间"
            >
              <template slot-scope="scope">
                <span>{{scope.row.entryTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="推送时间"
            >
              <template slot-scope="scope">
                <span>{{scope.row.createTime | converTime("YYYY-MM-DD") }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="备注信息"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.customerName !== '港交所'">{{scope.row.remark}}</span>
                <span v-if="scope.row.customerName == '港交所'">无</span>
              </template>
            </el-table-column>
          </el-table>

          <div class="pager">

            <el-pagination
              @size-change="handleSizeChange"
              @current-change="pagehandleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5,10,15]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>

    </div>
    <div class="posttable errortable" v-show="!addShow">
      <el-row type="flex" justify="center" style="height: 50px;
    line-height: 50px;">
        <el-col :span="23">

            <div  class="tabletitle"  style="float: left;margin-left: -10px;">
              <h4>退回简历</h4>
            </div>
                <div class="right1" style="float: right">
                  <el-button class="edit" @mousedown.native="editdown" @mouseup.native="editup"
                             @click="editback()"
                             :class="{'active1' : newcolor1}" size="small" round>修改
                  </el-button>
                  <el-button class="delete" @mousedown.native="deletedown" @mouseup.native="deleteup"
                             @click="deleteback"
                             :class="{'active2' : newcolor2}" size="small" round>入库
                  </el-button>
                </div>


        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="23">
          <el-table
            class="resumetable"
            ref="singleTable1"
            highlight-current-row
            :data="tableData1"
            @current-change="handleCurrentChange1"
            :default-expand-all="true"
          >
            <el-table-column
              label="推送客户"
            >
              <template slot-scope="scope">
                <span style="cursor: pointer" @click="viewdetail(scope.row)">{{scope.row.customerName}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="需求编号"
            >
              <template slot-scope="scope">
                <span class="other" @click="getrequire(scope.row)">{{scope.row.requireNum}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="postName"
              label="推送职位">
            </el-table-column>
            <el-table-column
              prop="postLevel"
              label="职位级别">
            </el-table-column>
            <el-table-column
              prop="area"
              label="所属区域"
            >
            </el-table-column>
            <el-table-column
              label="姓名">
              <template slot-scope="scope">
                <span><a class="other" :href="scope.row.group+'/'+scope.row.fileAddress" target="_blank">{{scope.row.name}}</a></span>
              </template>
            </el-table-column>
            <el-table-column
              label="毕业时间"
            >
              <template slot-scope="scope">
                <span>{{scope.row.graduationTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="联系方式"
            >
              <template slot-scope="scope">
                <div v-if="scope.row.phone">
                  <span v-if="scope.row.phone.indexOf('http') == -1">{{scope.row.phone}}</span>
                  <a  class="other" v-else :href="scope.row.phone" target="_Blank">电话链接</a>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="离职状态"
            >
            </el-table-column>
            <el-table-column
              prop="expectSalary"
              label="期望薪资"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.customerName !== '港交所'">{{scope.row.expectSalary}}k*{{scope.row.expectSalaryNum}}</span>
                <span v-if="scope.row.customerName == '港交所'">无</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="entryTime"
              label="到岗时间"
            >
              <template slot-scope="scope">
                <span>{{scope.row.entryTime}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="createTime"
              label="推送时间"
            >
              <template slot-scope="scope">
                <span>{{scope.row.createTime | converTime("YYYY-MM-DD") }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作人"
            >
              <template slot-scope="scope">
                <span>{{scope.row.rejecter}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="remark"
              label="备注信息"
            >
            </el-table-column>
            <el-table-column type="expand" width="5">
              <template slot-scope="scope">
                <p style="color: #fe423e;">退回原因</p>
                <p>{{scope.row.rejectReason}}</p>
              </template>
            </el-table-column>
          </el-table>

          <div class="pager">

            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="pagehandleCurrentChange1"
              :current-page="currentPage1"
              :page-sizes="[5,10,15]"
              :page-size="pagesize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalcount1"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>

    </div>
    <div v-if="type == 1">
      <add-resume v-show="addShow" ref="uploadAdd" @getData="getData1"></add-resume>
    </div>
    <div v-if="type == 2">
      <job-Detail v-show="addShow" :detail-no="detailno"></job-Detail>
    </div>
    <div v-if="type == 3">
      <upload-Detail v-show="addShow" :detail-code="detailcode"></upload-Detail>
    </div>
    <div v-if="type == 4">
      <edit-resume :current-data="currentrow" v-show="addShow" ref="uploadEdit" @getData="getData1"
                   @getbackData="getbackData1"></edit-resume>
    </div>
    <div v-if="type == 5">
      <upload-resume v-show="addShow" ref="uploadResume" @getData="getData1"></upload-resume>
    </div>

    <el-dialog
      title="入库简历"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="deleteClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">确定入库该简历吗？</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="deletedis" round @click="deletesend">确 定</el-button>
    <el-button round @click="deleteClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="入库简历"
      :visible.sync="dialogVisible1"
      width="30%"
      :before-close="deleteClose1"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">确定入库该简历吗？</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" :disabled="deletedis1" round @click="deletesend1">确 定</el-button>
    <el-button round @click="deleteClose1" class="cancel">取 消</el-button>
  </span>
    </el-dialog>
    <el-dialog
      title="错误"
      :visible.sync="editdialogVisible"
      width="30%"
      :before-close="handleClose"
      class="deletedialog"
    >
      <div style="text-align: center">
        <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;"><span
          style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何简历</span></i>
      </div>
      <span slot="footer" class="dialog-footer">
           <el-button class="sure" round @click="handleClose">确 定</el-button>
    <el-button round @click="handleClose" class="cancel">取 消</el-button>
  </span>
    </el-dialog>


  </div>
</template>
<script>
  import axios from 'axios'
  import qs from 'qs'
  import AddResume from './addresume.vue'
  import EditResume from './editresume.vue'
  import JobDetail from './jobdetail.vue'
  import UploadDetail from './uploaddetail.vue'
  import UploadResume from './uploadresume.vue'


  export default {
    name: "resumeupload",
    data() {
      return {
        title: '',
        newcolor: false,
        secondtitle: '',
        secondshow: false,
        newcolor1: false,
        newcolor2: false,
        newcolor3: false,
        searchword: '',
        tableData: [],
        tableData1: [],
        currentPage: 1,
        currentPage1: 1,
        pagesize: 5,
        pagesize1: 5,
        totalcount: null,
        totalcount1: null,
        addShow: false,
        currentRow: null,
        currentRow1: null,
        dialogVisible: false,
        dialogVisible1: false,
        editdialogVisible: false,
        detailno: '',
        detailcode: '',
        type: null,
        currentrow: null,
        deletedis : false,
        deletedis1 : false,
      }
    },
    created() {
      this.getData();
      this.getbackData();
    },
    methods: {
      //获取保存状态下的表格数据
      getData() {
        this.addShow = false;
        this.secondshow = false;
        this.currentRow = null;
        var form = {condition: this.searchword,pageNum : this.currentPage,pageSize : this.pagesize};
        axios.post(this.url + '/resumeUpload/getList', form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      getData1() {
        this.addShow = false;
        this.secondshow = false;
        this.currentRow = null;
        this.currentPage = 1;
        var form = {condition: this.searchword,pageNum : this.currentPage,pageSize : this.pagesize};
        axios.post(this.url + '/resumeUpload/getList', form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData = res.data.data.list;
            this.totalcount = res.data.data.total;
          }
        })
      },
      //获取退回简历的数据
      getbackData() {
        this.currentRow1 = null;
        this.addShow = false;
        this.secondshow = false;
        var form = {condition: this.searchword,pageNum : this.currentPage1,pageSize : this.pagesize1};
        axios.post(this.url + '/resumeUpload/getRejectResume', form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData1 = res.data.data.list;
            this.totalcount1 = res.data.data.total;
            if(this.currentPage1 > Math.ceil(this.totalcount1/this.pagesize1)){
              this.currentPage1 = Math.ceil(this.totalcount1/this.pagesize1);
            }
          }
        })
      },
      getbackData1() {
        this.currentRow1 = null;
        this.addShow = false;
        this.secondshow = false;
        this.currentPage1 = 1;
        var form = {condition: this.searchword,pageNum : this.currentPage1,pageSize : this.pagesize1};
        axios.post(this.url + '/resumeUpload/getRejectResume', form).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.tableData1 = res.data.data.list;
            this.totalcount1 = res.data.data.total;
            if(this.currentPage1 > Math.ceil(this.totalcount1/this.pagesize1)){
              this.currentPage1 = Math.ceil(this.totalcount1/this.pagesize1);
            }
          }
        })
      },
      //隐藏表单，显示表格
      tableshow() {
        this.addShow = false;
        this.secondshow = false;
        this.type = null;
        this.currentrow = null;
        this.currentRow1 = null;
        this.getData();
        this.getbackData();
      },
      //显示职位需求详情部分，隐藏表格
      getrequire(val) {
        this.detailno = val.requireNum;
        this.addShow = !this.addShow
        this.secondtitle = "职位需求"
        this.secondshow = true;
        this.type = 2;
      },
      //显示上传内容详情部分，隐藏表格
      viewdetail(val) {
        this.detailcode = val;
        this.addShow = !this.addShow
        this.secondtitle = "查看上传内容"
        this.secondshow = !this.secondshow
        this.type = 3
      },
      //新增按钮按下鼠标变化背景色
      adddown() {
        this.newcolor = true
      },
      //松开按钮变化背景色
      addup() {
        this.newcolor = false
      },
      //隐藏表格，展示简历上传新增部分
      addshow() {
        this.addShow = !this.addShow
        this.secondtitle = "新增简历"
        this.secondshow = true
        this.type = 1;
        this.$nextTick(() => {
          if (this.$refs.uploadAdd) {
            this.$refs.uploadAdd.initdata();
            this.$refs.uploadAdd.clearData();
            this.$refs.uploadAdd.resetFields('form');
          }
        })
      },
      uploadshow(){
        this.addShow = !this.addShow
        this.secondtitle = "上传简历"
        this.secondshow = true
        this.type = 5;
        this.$nextTick(() => {
          if (this.$refs.uploadResume) {
            this.$refs.uploadResume.initdata();
            this.$refs.uploadResume.clearData();
            this.$refs.uploadResume.resetFields('form');
          }
        })
      },
      //同上，与新增按钮同类型事件
      editdown() {
        this.newcolor1 = true
      },
      editup() {
        this.newcolor1 = false
      },
      deletedown() {
        this.newcolor2 = true
      },
      deleteup() {
        this.newcolor2 = false
      },
      uploaddown(){
        this.newcolor3 = true
      },
      uploadup(){
        this.newcolor3 = false
      },
      //改变表格的页面展示数量
      handleSizeChange(val) {
        this.pagesize = val;
        this.getData();
      },
      handleSizeChange1(val) {
        this.pagesize1 = val;
        this.getbackData();
      },
      //修改当前表格页数
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.getData();
      },
      //同上
      pagehandleCurrentChange1(val) {
        this.currentPage1 = val;
        this.getbackData();
      },
      //点击表格行，获取当前行的数据
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      //同上
      handleCurrentChange1(val) {
        this.currentRow1 = val;
      },
      //修改
      edit() {
        this.currentrow = null;
        if (this.currentRow == null) {
          document.documentElement.style.overflow = 'hidden';
          //未选择表格行，展示的弹出框
          this.editdialogVisible = !this.editdialogVisible;
        } else {
          document.documentElement.style.overflow = 'auto';
          this.addShow = !this.addShow
          this.secondtitle = "修改简历"
          this.secondshow = !this.secondshow
          this.type = 4
          this.currentrow = this.currentRow;
          //修改子组件的事件触发
            if (this.$refs.uploadEdit) {
              this.$refs.uploadEdit.clearData();
              this.$refs.uploadEdit.resetFields('form');
            }
        }
      },
      //退回简历的修改事件
      editback() {
        this.currentrow = null;
        if (this.currentRow1 == null) {
          document.documentElement.style.overflow = 'hidden';
          this.editdialogVisible = !this.editdialogVisible
        } else {
          document.documentElement.style.overflow = 'auto';
          this.addShow = !this.addShow;
          this.secondtitle = "修改简历";
          this.secondshow = !this.secondshow;
          this.type = 4;
          this.currentrow = this.currentRow1;
          if (this.$refs.uploadEdit) {
            this.$refs.uploadEdit.clearData();
            this.$refs.uploadEdit.changeshow();
            this.$refs.uploadEdit.resetFields('form');
          }
        }
      },
      //入库退回简历
      deleteback(){
        if (this.currentRow1 == null) {
          document.documentElement.style.overflow = 'hidden';
          this.editdialogVisible = !this.editdialogVisible
        }else{
          this.deletedis1 = false;
          document.documentElement.style.overflow = 'hidden';
          this.dialogVisible1 = true;
        }
      },
      //入库弹出框
      deletedata(row) {
        if (this.currentRow == null) {
          document.documentElement.style.overflow = 'hidden';
          this.editdialogVisible = !this.editdialogVisible
        } else {
          document.documentElement.style.overflow = 'hidden';
          this.dialogVisible = true;
          this.deletedis = false;
        }
      },
      //发送入库请求
      deletesend() {
        this.deletedis = true;
        axios.post(this.url + '/resumeUpload/depositResume', qs.stringify({
          id: this.currentRow.id
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.deletedis = false;
            this.dialogVisible = false;
            this.getData();
            document.documentElement.style.overflow = 'auto';
          }
        })
      },
      deletesend1() {
        this.deletedis1 = true;
        axios.post(this.url + '/resumeUpload/depositResume', qs.stringify({
          id: this.currentRow1.id
        })).then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.deletedis1 = false;
            this.dialogVisible1 = false;
            this.getbackData();
            document.documentElement.style.overflow = 'auto';
          }
        })
      },
      //未选择当场行时的弹出框的关闭事件
      handleClose() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      //入库弹出框的关闭事件
      deleteClose(row) {
        this.deletedis = false;
        this.$refs.singleTable.setCurrentRow(row);
        this.dialogVisible = false;
        document.documentElement.style.overflow = 'auto';
      },
      deleteClose1(row) {
        this.deletedis1 = false;
        this.$refs.singleTable1.setCurrentRow(row);
        this.dialogVisible1 = false;
        document.documentElement.style.overflow = 'auto';
      },
    },
    components: {
      AddResume,
      EditResume,
      JobDetail,
      UploadDetail,
      UploadResume
    }
  }
</script>
<style scoped>
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }

  .posttable {
    /*min-height: 700px;*/
    background-color: #fff;
  }

  .tabletitle {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
  }

  .add {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }

  .add:hover {
    color: #fff !important;
  }

  .add:focus {
    color: #fff !important;
  }
  .upload{
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #ffbc1c 0%, #f69710 100%);
    padding: 7px 15px!important;
  }
  .upload:hover{
    color:#fff!important;
  }
  .edit {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
  }

  .edit:hover {
    color: #fff !important;
  }

  .edit:focus {
    color: #fff !important;
  }

  .delete {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #2f61ac 0%, #314159 100%);
  }

  .delete:hover {
    color: #fff !important;
  }

  .delete:focus {
    color: #fff !important;
  }

  .textactive {
    color: #1099ff;
  }

  .left {
    margin-left: 30px;
  }

  .right {
    padding-left: 30px;
  }



  .other {
    color: #1198ff;
    cursor: pointer;
    text-decoration: none;
  }
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .active {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }

  .active1 {
    background: linear-gradient(to bottom, #1cf1e3 0%, #379b94 100%);
  }

  .active2 {
    background: linear-gradient(to bottom, #5a7cae 0%, #4e87dc 100%);
  }
  .active3 {
    background: linear-gradient(to bottom, #ff9600 0%, #d68300 100%);
  }
</style>
